<script setup lang="ts">
import {reactive, ref, watchEffect} from "vue";
import type {ComponentSize, FormInstance, FormRules} from "element-plus";

const prpos = defineProps(['lookOrderData', 'dialogVisible', 'editOrderData'])

const emit = defineEmits(['close-mask', 'emit-form'])

//closeDialog
function closeDialog() {
  emit('close-mask', false)
}


const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

const ruleForm = ref({
  desc: '',
  evaluate: '',
  id: '',
  img: '',
  imgCount: '',
  name: '',
  price: '',
  sales: '',
  type: '',
})

//监视传过来的值
watchEffect(() => {
  if (prpos.editOrderData) {
    ruleForm.value.name = prpos.editOrderData.name
    ruleForm.value.desc = prpos.editOrderData.desc
    ruleForm.value.price = prpos.editOrderData.price
    ruleForm.value.img = prpos.editOrderData.img
    ruleForm.value.sales = prpos.editOrderData.sales
    ruleForm.value.type = prpos.editOrderData.type
    ruleForm.value.evaluate = prpos.editOrderData.evaluate
    ruleForm.value.id = prpos.editOrderData.id
    ruleForm.value.imgCount = prpos.editOrderData.imgCount
  }
})






const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit('emit-form', ruleForm.value)
      //关闭弹窗
      closeDialog()
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.value.name = ''
  ruleForm.value.desc = ''
  ruleForm.value.price = ''
  ruleForm.value.sales = ''
  ruleForm.value.imgCount = ''
  ruleForm.value.evaluate = ''
  ruleForm.value.img = ''
}

const options = Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))


</script>

<template>
  <el-dialog :model-value="dialogVisible" :title="'订单编辑'" :center="true"
             :close-on-click-modal="false" :width="500" @close="closeDialog">
    <div class="order-look-and-edit-header">
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
      >
        <el-form-item label="名字" prop="name">
          <el-input v-model="ruleForm.name" size="large"/>
        </el-form-item>
        <el-form-item label="介绍" prop="desc">
          <el-input v-model="ruleForm.desc" size="large"/>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="ruleForm.price" size="large"/>
        </el-form-item>
        <el-form-item label="数量" prop="sales">
          <el-input v-model.number="ruleForm.sales" size="large"/>
        </el-form-item>
        <el-form-item label="图片数量" prop="imgCount">
          <el-input v-model.number="ruleForm.imgCount" size="large"/>
        </el-form-item>
        <el-form-item label="商品评价" prop="evaluate">
          <el-input v-model="ruleForm.evaluate" size="large"/>
        </el-form-item>
        <el-form-item label="商品图片" prop="img">
          <el-input v-model="ruleForm.img" size="large"/>
        </el-form-item>
        <el-form-item label="商品类型" prop="type">
          <el-input v-model="ruleForm.type" size="large"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            编辑
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<style scoped>
.order-look-and-edit-list {
  margin-bottom: 20px;
}
</style>